<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="" />
    <link rel="icon" href="" type="image/png" />
    <title>课程地图</title>
    <link href="css/normalize.min.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="banner"></div>

      <div class="main-container">
        <!--头部导航栏-->
        <div class="logo">
          <a href="./list.html">
            <img src="./images/logo.png" alt="" />
            <span>管理科学与房地产学院</span>
          </a>
        </div>
        <!--//头部导航栏-->

        <!-- <pre>{{pro_gr}}</pre> -->
        <!-- <pre>{{courseIds}}</pre> -->

        <section class="map-container">
          <div class="wrapper">
            <div class="tit-group">
              <i class="icon-map"></i>
              <span>课程地图</span>
              <div class="cate-menu">
                <div :class="['all',{on:queryLength <= 0}]" @click="selectAll">全部</div>
                <div class="yaoqiu">
                  <el-cascader
                    v-model="query.ask"
                    :options="pro_gr"
                    :show-all-levels="false"
                    clearable
                    size="mini"
                    placeholder="毕业要求"
                    :props="{emitPath:false,value:'index',label:'name',checkStrictly: true}"></el-cascader>
                </div>
                <div class="cate">
                  <el-select size="mini" v-model="query.category" clearable placeholder="课程类别">
                    <el-option v-for="item in cates" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </div>
                <div class="xingzhi">
                  <el-select size="mini" v-model="query.nature" clearable placeholder="课程性质">
                    <el-option label="必修" value="必修"></el-option>
                    <el-option label="选修" value="选修"></el-option>
                  </el-select>
                </div>
              </div>
            </div>

            <!-- 主体部分 -->
            <div class="main-body">
              <div class="item" v-for="item in coursesList" :key="item.id">
                <!-- <pre>{{item}}</pre> -->
                <div class="title">{{item.name}}</div>
                <div class="list">
                  <el-collapse v-model="item.expands">
                    <el-collapse-item v-for="elem in item.list" :key="elem.id" :title="elem.name" :name="elem.id">
                      <template #title>
                        <div class="content" :style="elem.color ? `background-color:${elem.color};color:#ffffff;` : ''">
                          <el-tooltip effect="dark" :content="elem.name" placement="top">
                            <div class="ellipsis">{{elem.name}}</div>
                          </el-tooltip>
                        </div>
                      </template>

                      <dl>
                        <dt>学分：</dt>
                        <dd>{{elem.scope}}</dd>
                      </dl>
                      <dl>
                        <dt>学时：</dt>
                        <dd>{{elem.time}}</dd>
                      </dl>
                      <dl class="column">
                        <dt>{{elem.isMust}}</dt>
                        <dd>
                          <el-tooltip
                            v-for="vo in elem.pro_gr"
                            :key="vo.index"
                            effect="dark"
                            :content="vo.name"
                            placement="top">
                            <span :style="`background-color:${vo.color}`"></span>
                          </el-tooltip>
                          <!-- <span class="bg-success"></span><span class="bg-danger"></span><span class="bg-warning"></span> -->
                        </dd>
                      </dl>
                      <el-link
                        type="primary"
                        :href="`./course_overview.html?id=${elem.id}&mapId=${id}`"
                        target="_blank">
                        查看课程关系 <i class="el-icon-d-arrow-right"></i>
                      </el-link>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!--底部-->
      <footer>
        <div class="wrapper">
          <div class="copyright">管理科学与房地产学院 版权所有</div>
          <div class="tip">建议使用IE8及以上版本或其他高版本浏览器，屏幕分辨率在1366*768及以上的客户端访问</div>
        </div>
      </footer>
    </div>
  </body>

  <!--//底部-->
  <script src="./js/vue.min.js"></script>
  <script src="./js/lodash.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    function getUrlParams(param) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(param) || ''
    }

    var app = new Vue({
      el: '#app',
      data() {
        return {
          query: {
            ask: '',
            category: '',
            nature: '',
          },
          info: {},
          courses: [],
          cates: [],
        }
      },
      computed: {
        type() {
          return getUrlParams('type')
        },

        id() {
          return getUrlParams('id')
        },

        queryLength() {
          return _.get(_.compact(_.values(this.query) || []), 'length', 0)
        },

        pro_gr() {
          return _.map(_.get(this.info, 'acf.pro_gr', []) || [], (vo, idx) => {
            return {
              index: `2-${idx + 1}`,
              name: vo.pro_group.pro_gr_content,
              color: vo.pro_group.pro_gr_color,
              children: _.map(vo.pro_decomposition, (child, cidx) => {
                return {
                  index: `2-${idx + 1}-${cidx + 1}`,
                  name: `毕业要求${idx + 1}-${cidx + 1}`,
                  courses: _.map(child.pro_gr_course_ref, 'pro_gr_course_ref_course'),
                }
              }),
            }
          })
        },

        courseIds() {
          return _.uniq(_.flatMap(_.flatMap(this.pro_gr, 'children'), 'courses'))
        },

        coursesList() {
          const lists = _.map(['一', '二', '三', '四', '五', '六', '七', '八'], (vo, idx) => {
            const name = `第${vo}学期`
            return {
              name,
              id: idx + 1,
              type: idx + 1,
              expands: [],
              list: _.map(
                _.filter(
                  this.courses,
                  (item) =>
                    (_.get(item, 'acf.course_semester', []) || []).includes(name) && this.courseIds.includes(item.id)
                ),
                (vo) => {
                  const pro_gr = _.map(
                    _.filter(this.pro_gr, (voo) => _.some(voo.children, (child) => child.courses.includes(vo.id))),
                    (val) => {
                      return {
                        ...val,
                        children: _.filter(val.children, (kk) => kk.courses.includes(vo.id)),
                      }
                    }
                  )

                  const category = _.map(vo.course_category_name || [], (key) => {
                    const current = _.find(this.cates, { id: key })
                    return {
                      ..._.pick(current, ['id', 'name', 'slug']),
                      color: _.get(current, 'acf.course_category_color', '#cccccc'),
                    }
                  })

                  return {
                    id: vo.id,
                    name: vo.title?.rendered,
                    scope: vo.acf?.course_scope,
                    time: vo.acf?.course_hour,
                    isMust: vo.acf?.course_true_false, //必修
                    categoryId: _.get(_.first(category), 'id', ''),
                    proIndexs: _.flatMap(pro_gr, (vo) => {
                      return _.flattenDeep([vo.index, _.map(vo.children, 'index')])
                    }),
                    category: _.first(category) || {},
                    color: _.get(_.first(category) || {}, 'color', ''),
                    pro_gr,
                    // ..._.pick(vo, ['type']),
                    // 'acf','link'
                  }
                }
              ),
            }
          })

          if (this.queryLength <= 0) {
            return lists
          }

          if (this.queryLength === 1) {
            return _.map(lists, (vo) => {
              return {
                ...vo,
                list: _.filter(vo.list, (voo) => {
                  if (this.query.category) {
                    return voo.categoryId === this.query.category
                  }

                  if (this.query.ask) {
                    return voo.proIndexs.includes(this.query.ask)
                  }

                  if (this.query.nature) {
                    return voo.isMust === this.query.nature
                  }
                }),
              }
            })
          }

          if (this.queryLength === 2) {
            return _.map(lists, (vo) => {
              return {
                ...vo,
                list: _.filter(vo.list, (voo) => {
                  if (this.query.category && this.query.ask) {
                    return voo.categoryId === this.query.category && voo.proIndexs.includes(this.query.ask)
                  }

                  if (this.query.category && this.query.nature) {
                    return voo.categoryId === this.query.category && voo.isMust === this.query.nature
                  }

                  if (this.query.ask && this.query.nature) {
                    return voo.proIndexs.includes(this.query.ask) && voo.isMust === this.query.nature
                  }
                }),
              }
            })
          }

          if (this.queryLength === 3) {
            return _.map(lists, (vo) => {
              return {
                ...vo,
                list: _.filter(
                  vo.list,
                  (voo) =>
                    voo.categoryId === this.query.category &&
                    voo.proIndexs.includes(this.query.ask) &&
                    voo.isMust === this.query.nature
                ),
              }
            })
          }
        },
      },
      mounted() {
        this.fetchCateData()
        this.fetchData()
        this.fetchCourseData()
      },
      methods: {
        fetchData() {
          if (this.id) {
            fetch(`https://api.kejianxin.com/wp-json/wp/v2/profession/${this.id}`)
              .then((res) => {
                return res.json()
              })
              .then((data) => {
                this.info = data || {}
              })
          }
        },

        fetchCourseData() {
          fetch('https://api.kejianxin.com/wp-json/wp/v2/course?per_page=600')
            .then((res) => {
              return res.json()
            })
            .then((data) => {
              this.courses = data || []
            })
        },

        fetchCateData() {
          if (this.id) {
            fetch(`https://api.kejianxin.com/wp-json/wp/v2/course_category_name`)
              .then((res) => {
                return res.json()
              })
              .then((data) => {
                this.cates = data || {}
              })
          }
        },

        selectAll() {
          this.query = {
            ask: '',
            category: '',
            nature: '',
          }
        },
      },
    })
  </script>
</html>
